<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>PRIMEIROS PASSOS COM BRACKETS</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

		<h1>PRIMEIROS PASSOS COM BRACKETS</h1>
		<h2>Este é o teu guia!</h2>
		
		<!--
			FEITO COM <3 E JAVASCRIPT
		-->
		
		<p>
			Bem vindo a esta pré-vizualização do Brackets, um novo editor open-source para a proxima geração web.
			Somos grandes fãs de padrões e queremos construir uma melhor ferramenta para JavaScript, HTML e CSS e relacionadas
			com tecnologias web abertas. Este é o nosso humilde começo.
		</p>
		
		<!--
			O QUE É O BRACKETS?
		-->
		<p>
			<em>Estás a olhar para uma versão antecipada of Brackets</em>
			Em muitas formas, Brackets é um tipo de editor diferente. Uma grande diferença é que este editor é escrito em JavaScript.
			Embora o Brackets possa não estar pronto para o use dia-a-dia por enquanto, estamos a usa-lo todos os dias para construir o Brackets.
		</p>
		
		
		<h2>Estamos a tentar algumas coisas novas</h2>
		
		<!--
			A RELAÇÃO ENTRE HTML, CSS E JAVASCRIPT
		-->
		<h3>Edição Rápida para CSS e JavaScript</h3>
		<p>
			Ao editar HTML, use as teclas de atalho <kbd>Cmd/Ctrl + E</kbd> para abrir um rapidamente o editor de linha que mostra todo o CSS relacionado.
			Faça uma pequena alteração no seu CSS, pressione <kbd>ESC</kbd> e está de volta a editar HTML.
			Ou simplesmente deixe as regras de CSS abertas e elas tornam-se parte do seu editor de HTML.
			Se pressionar a tecla <kbd>ESC</kbd> fora do Editor Rápido, todas elas fecham. Sem mais trocas de ficheiros e perdar o fio à meada.
		</p>
		
		<samp>
			Queres ver isto em acção? Posiciona o teu cursor sobre a tag <!-- <samp> --> e pressiona
			<kbd>Cmd/Ctrl + E</kbd>. Deves ver o Editor Rápido de CSS aparecer.
			Na direita vais ver uma lista de regras CSS relacionadas com essa tag.
			Simplesmente navegue pela list de regras com <kbd>Alt + Up/Down</kbd> para encontrar aquela que queres editar.
		</samp>
		
		<a href="screenshots/quick-edit.png">
			<img alt="Um screenshot a mostrar a Edição Rápida de CSS" src="screenshots/quick-edit.png" />
		</a>
		
		<!--
			LIVE PREVIEW
		-->
		<h3>Pré-Vizualizar mudança no CSS ao vivo no navegador</h3>
		<p>
			Sabes que a "dança guardar/recarregar" que fizemos por anos? Aquela que fazes uma mudança no editor,
			pressionas guardar, mudas para o navegador e precionas recarregar para ver o resultado?
			Com o Brackets, não precisas de fazer essa dança.
		</p>
		<p>
			Brackets abre uma <em>live connection</em> para o teu navegador e envia actualizações do CSS assim que escreves!
			Probavelmente já fazias uma coisa parecida com ferramentas de navegador, mas com o Brackets
			não é preciso copiar e colar o código CSS final de novo no editor. O teu código corre no navegador, e vive no teu editor!
		</p>
		
		<samp>
			Se tens o Google Chrome instalado, podes tentar isto por ti próprio. Clica no icone do relampago no canto superior direito
			ou pressiona <kbd>Cmd/Ctrl + Alt + P</kbd>. Quando o Live Preview está ligado a um documento HTML,
			todo o css ligado a ele pode ser editado em temo real.
			O icone muda de cinzento para dourado quando o Brackets estabelece a ligação ao navegador.
			
			Agora, ponha o seu curso na tag <!-- <img> --> em cima (linha 56) e pressione <kbd>Cmd/Ctrl + E</kbd> Para abrir as regras CSS para aquela tag.
			Tenta mudar o tamanho da borda de 10px par 20px ou muda a cor de fundo de "transparent"(nome da cor) para "hotpink"(nome da cor).
			Se o Brackets e o teu navegador estão a correr lado-a-lado, vais ver que as mudanças são instantaneas no teu navegador.
			Altamente, certo?
		</samp>
				
		<p class="note">
			Hoje, o Brackets só suporta Live Preview para CSS. Estamos de momento a trabalhar no Live Preview para HTML e JavaScript.
			Na versãp actual, não vai ver mudanças no seu ficheiro HTML até guardar o documento.
			Live previews são só possiveis com Google Chrome. Nós queremos trazer esta funcionalidade para todos os navegadores mais conhecidos,
			e estamos ansiosos por trabalhar com esses fornecedores.
		</p>
		
		<!--
			DEIXA-NOS SABER O QUE PENSAS
		-->
		<h2>Envolva-se</h2>
		<p>
			Brackets é um projeto open-source. Desenvolvedores Web de todo o mundo estão a contribuir para construir um melhor editor de código.
			Diz-nos o que pensas, partilha as tuas ideias or contribui diretamente para o projeto.
		</p>
		<ul>
			<li><a href="http://brackets.io">Brackets.io</a></li>
			<li><a href="http://blog.brackets.io">Brackets Blog da Equipa</a></li>
			<li><a href="http://github.com/adobe/brackets">Brackets no GitHub</a></li>
			<li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
			<li><a href="http://groups.google.com/group/brackets-dev">Brackets Lista de Mails Desenvolvedores</a></li>
			<li><a href="https://twitter.com/#!/brackets">@Brackets no Twitter</a></li>
			<li>Fala com os desenvolvedores do Brackets no IRC em #brackets no Freenode</li>
		</ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->